<template>
    <div class="main">
        <!-- 走马灯图 -->
        <div class="banner-section">
            <div class="banner-title">
                <span>{{ greeting }}</span>
            </div>
            <div class="banner-content">
                <!-- 左侧走马灯 -->
                <div class="carousel-wrapper">
                    <el-carousel 
                        :interval="4000" 
                        height="200px"
                        indicator-position="none"
                        arrow="never">
                        <el-carousel-item v-for="(obj, index) in songListStore.albumList" :key="obj.bannerId">
                            <div class="carousel-item">
                                <img :src="obj.pic" alt="banner">
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    <!-- 自定义指示器 -->
                    <div class="custom-indicators">
                        <span v-for="(_, index) in songListStore.albumList" 
                              :key="index"
                              :class="['dot', { active: currentIndex === index }]"
                              @click="setCurrentIndex(index)">
                        </span>
                    </div>
                </div>
                <!-- 右侧两个卡片 -->
                <div class="right-cards">
                    <div class="card">
                        <div class="card-container">
                            <img class="card-img" :src="songListStore.albumList[0]?.pic">
                            <div class="card-content">
                                <h3 class="card-title">每日推荐</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-container">
                            <img class="card-img" :src="songListStore.albumList[1]?.pic">
                            <div class="card-content">
                                <h3 class="card-title">私人漫游</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="playList">
            <div @click="toplayListPage()" class="section-title">
                <h2>推荐歌单 ></h2>
            </div>
            <div class="playlist-cards">
                <div v-for="list in songListStore.songLists" 
                     :key="list.id"
                     class="playlist-card">
                    <div class="playlist-card-container">
                        <div class="playlist-img-wrapper">
                            <img @click="toPlayListDetails(list.id)" class="playlist-img" :src="`${config.downloadUrl}?name=${list.pic}`">
                            <div class="play-button" @click="playAll(list.id)">
                                <el-icon><VideoPlay /></el-icon>
                            </div>
                        </div>
                        <div class="playlist-title">{{ list.title }}</div>
                        <div class="playlist-desc">by: {{ list.creater}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="song">
            <div class="section-title">
                <h2>热门歌曲 ></h2>
            </div>
            <div class="playlist-cards">
                <div v-for="(list, index) in songListStore.songs" 
                     :key="index" 
                     class="playlist-card">
                    <div class="playlist-card-container">
                        <div class="playlist-img-wrapper">
                            <img class="playlist-img" :src="`${config.downloadUrl}?name=${list.pic}`">
                            <div class="play-button" @click="toPlay(list.id, list.url, list.pic, list.name, list.singerId, list.lyric, index)">
                                <el-icon><VideoPlay /></el-icon>
                            </div>
                        </div>
                        <div class="playlist-title">{{ list.name }}</div>
                        <div class="playlist-desc">专辑: {{ list.introduction }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="singer">
            <div class="section-title">
                <h2>推荐歌手 ></h2>
            </div>
            <div class="playlist-cards">
                <div v-for="list in songListStore.singer" 
                     :key="list.id" 
                     class="playlist-card"
                     @click="toSingerDetails(list.id)">
                    <div class="playlist-card-container">
                        <div class="playlist-img-wrapper">
                            <img class="playlist-img" :src="`${config.downloadUrl}?name=${list.pic}`">
                        </div>
                        <div class="playlist-title">{{ list.name }}</div>
                        <div class="playlist-desc">地区: {{ list.location }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="FondMusic">
import { reactive, ref, onMounted, computed } from 'vue';
import { useSongListStore } from '@/store/songList';
import config from '../../../public/config';
import { selectAllSongList } from '@/api/songList';
import { selectAll } from '@/api/song';
import { getSingerAll } from '@/api/singer';
import axios from 'axios';
import { audioMixin } from '@/mixins/index.js'
import { useAudioStore } from '@/store/audio';
import { usePlayListDetails } from '@/store/playListDetails';
import { useSingerStore } from '@/store/singer';
import router from '@/router';
import { useListSongStore } from '@/store/listSong';
import { selectSongBySongListIdNoPage } from '@/api/listSong';
import { selectSongById } from '@/api/song';

//混入
defineOptions({
    mixins: [audioMixin],
});
const playListDetailsStore = usePlayListDetails()
const songListStore = useSongListStore()
const audioStore = useAudioStore()
const singerStore = useSingerStore()
const listSongStore = useListSongStore()
onMounted(() => {
    getSongList()
    getSong()
    getSinger()
    picture()
})



//获取歌单默认是10个
async function getSongList() {
    const params = new URLSearchParams()
    params.append("pageSize", songListStore.pageSize)
    params.append("pageNum", songListStore.currentPage)
    await selectAllSongList(params)
        .then(res => {
            songListStore.songLists = res.list
        })
}
//获取歌曲
async function getSong() {
    const params = new URLSearchParams()
    params.append("pageSize", songListStore.pageSize)
    params.append("pageNum", songListStore.currentPage)
    await selectAll(params)
        .then(res => {
            console.log(res)
            songListStore.songs = res.list
        })
}

//获取主页走马灯图片，当前是使用的网易云接口
async function getSinger() {
    const params = new URLSearchParams()
    params.append("pageSize", songListStore.pageSize)
    params.append("pageNum", songListStore.currentPage)
    await getSingerAll(params)
        .then(res => {
            console.log(res)
            songListStore.singer = res.list
        })
}
async function picture() {
    axios({
        method: 'get',
        url: 'http://mymusic.tshenqiu.top/homepage/block/page',
        params: {
            refresh: true
        }
    })
        .then((respose) => {
            let res = respose.data
            if (res.code != 200) {
                return Promise.reject(res.data)
            } else {
                return res,
                    songListStore.albumList = res.data.blocks[0].extInfo.banners
            }
        }, error => {
            console.log('错误', error.message)
        })
}
function toPlayList() {
    audioStore.listOfSong = songListStore.songs
    audioStore.id = audioStore.listOfSong[0].id;
    audioStore.url = audioStore.listOfSong[0].url;
    audioStore.pic = audioStore.listOfSong[0].pic
    audioStore.title = audioStore.listOfSong[0].name
    audioStore.singerId = audioStore.listOfSong[0].singerId
    audioStore.lyric = audioStore.listOfSong[0].lyric
    audioStore.listIndex = 0
}
function toPlayListDetails(id) {
    playListDetailsStore.isOpen = true
    playListDetailsStore.detailsId = id
}
function toSingerDetails(id) {
    singerStore.isSingerOpen = true
    singerStore.singerId = id
}

// 添加问候语计算
const greeting = computed(() => {
    const hour = new Date().getHours()
    if (hour >= 5 && hour < 12) {
        return '早上好，清晨从一首歌开始'
    } else if (hour >= 12 && hour < 14) {
        return '中午好，准备好享受惬意的午休了吗'
    } else if (hour >= 14 && hour < 18) {
        return '下午好，午休结束搬砖开始'
    } else if (hour >= 18 && hour < 24) {
        return '晚上好，美好的一天又结束了'
    } else {
        return '夜深了，早点休息吧'
    }
})

function toplayListPage(){
    router.push('/songList')
}
function playAll(id){
    console.log(id)
    getSongListDetails(id)
    audioStore.listOfSong = listSongStore.SongData
    audioStore.id = audioStore.listOfSong[0].id;
    audioStore.url = audioStore.listOfSong[0].url;
    audioStore.pic = audioStore.listOfSong[0].pic
    audioStore.title = audioStore.listOfSong[0].name
    audioStore.listIndex = 0
    audioStore.singerId = audioStore.listOfSong[0].singerId
    audioStore.lyric = audioStore.listOfSong[0].lyric
}

async function getSongListDetails(id) {
  let params = new URLSearchParams();
  params.append('songListId',id);
  try {
    const res = await selectSongBySongListIdNoPage(params);
    listSongStore.songIds = res.map(item => item.songId);
    listSongStore.SongData = []
    // 在获取到 songIds 后立即调用 getSongDetails
    await getSongDetails();
  } catch (error) {
    console.error('获取歌曲列表失败:', error);
  }
}

async function getSongDetails() {
  if (listSongStore.songIds.length === 0) {
    return;
  }
  const requests = listSongStore.songIds.map(songId => {
    const params = new URLSearchParams();
    params.append('id', songId);
    return selectSongById(params);
  });
  try {
    const results = await Promise.all(requests);
    listSongStore.SongData = results;
  } catch (error) {
    console.error('请求出错:', error);
  }
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #dfe4ed;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4b79a1, #283e51);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3b607e, #1b2e38);
}

.section-title {
    padding: 20px;
    text-align: left;
    position: relative;
}

.section-title h2 {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #333;
    margin: 0;
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease;
}

.section-title h2:hover {
    color: #409EFF;
}

.playList,
.song,
.singer {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cards-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: -40px;
    justify-content: flex-start;
    padding: 0 2%;
}

.card {
    width: 16%;
    min-width: 200px;
    margin: 1.5%;
    transition: all 0.3s ease;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.card-img:hover {
    transform: scale(1.05);
}

.card-content {
    padding: 12px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-intro {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-creator {
    font-size: 13px;
    color: #999;
    margin: 0;
}

.img-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 200px;
}

.img-wrapper:hover .play-button {
    opacity: 1;
}

.img-wrapper:hover .card-img {
    filter: brightness(0.7);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

.play-button:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button .el-icon {
    font-size: 24px;
    color: #409EFF;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.banner-section {
    padding: 20px 5%;
}

.banner-title {
    font-size: 20px;
    font-weight: bold;
    margin-left: -57px;
    color: #333;
    margin-bottom: 15px;
}

.banner-content {
    display: flex;
    gap: 15px;
    height: 200px;
    margin-left: -56px;
}

.carousel-wrapper {
    flex: 3;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.right-cards {
    flex: 2;
    display: flex;
    gap: 15px;
    margin-top: -10px;
}

.right-cards .card {
    flex: 1;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.right-cards .card:hover {
    transform: translateY(-5px);
}

.right-cards .card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.right-cards .card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.right-cards .card-content {
    padding: 8px 0;
}

.right-cards .card-title {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
}

.carousel-item {
    width: 100%;
    height: 100%;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    width: 15px;
    border-radius: 3px;
    background-color: #fff;
}

:deep(.el-carousel__container) {
    border-radius: 12px;
}

.playlist-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
    max-height: calc(2 * (200px + 80px));
    overflow: hidden;
}

.playlist-card {
    flex: 0 0 200px;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

.playlist-card:hover {
    transform: translateY(-5px);
}

.playlist-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playlist-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.playlist-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-count {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.playlist-title {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.section-title h2 {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #333;
    margin-left: 20px;
}

.playlist-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
}

.playlist-card {
    flex: 0 0 200px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.playlist-card:hover {
    transform: translateY(-5px);
}

.playlist-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playlist-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.playlist-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.playlist-img-wrapper:hover .play-button {
    opacity: 1;
}

.play-button .el-icon {
    font-size: 20px;
    color: #409EFF;
}

.playlist-title {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.playlist-desc {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.section-title {
    padding: 20px;
}

.section-title h2 {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #333;
    margin: 0;
}
</style>
